<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <h2 ref="one">Vue 实例对象</h2>
        <h2>count--{{count}}</h2>
        <div ref="two"> view+model </div>
        <h2 @click="change">msg--{{msg}}</h2>
        <button @click="count++">countAdd</button>
        <h2>a--{{a}}</h2>
        <h2>b--{{b}}</h2>
        <h2>c--{{c}}</h2>
        <button @click="teardown">点击销毁</button>

    </div>

    <script>
        var data={
            count:100,
            msg:'hehehhe hahaha ',
            a:8,
            b:30000,
            c:101,
        }
        let index = 0 ;
        const vm = new Vue({
            data:data,
            methods:{
                log(msg){
                    console.log(`//${++index}--${msg}`);
                },
                teardown(){
                    vm.$destroy()
                },
                change(){
                    console.log(this.$refs);
                }
            },
            name:'',
            watch:{//监听
            },
            computed:{//计算属性

            },
            filters:{},
            components:{},
            directives:{},
            beforeCreate(){
                console.log(this);
                //有this 但是还没有绑定方法 methods
                console.log(`//${++index}--beforeCreate--实例创建之前`)
            },
            created(){
                this.log('created--实例已经被创建了')
            },
            beforeMount(){
                console.log(this.$refs);
                this.log('beforeMount--实例被载入之前')
            },
            mounted(){
                //最重要
                //全部都是虚拟DOM  virtual DOM
                //载入成为真实DOM
                this.$refs.one.style.color="pink";
                this.$refs.two.style.background="green";
                this.log('mound 实例已经被载入了   全部都是真实DOM')
            },
            beforeUpdate(){
                this.log('beforeUpdate--实例数据被更新之前')
            },
            updated(){
                this.log('updated--实例数据被更新完成')
            },
            beforeDestroy(){
                this.log('beforeDestroy--实例被销毁之前')
            },
            destroyed(){
                this.log('destroyed--实例被销毁了')
            }


        }).$mount("#app")

        console.log(vm);
        console.log(vm.$data);
    </script>
    <!-- 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
    设计模式  (工厂模式  单例模式  混合模式  观察者模式  发布订阅模式 )

    数据开发模式模型   
    MVVM  M  model 数据模型  V  view 视图界面  VM  viewmodel 视图和数据混淆在一起(数据视图系统)  (Vue部分遵循)
    MVC   M  model 数据模型  V  view 视图界面  C   controller 控制器 (JS逻辑 方法和事件  Angular)
    MVP   M  model 数据模型  V  view 视图界面  P   Prestener  复杂逻辑   



    选项对象   {} 
    选项对象属性 (data el  methods name watch computed filter component directive 10个生命周期钩子函数) 

    vm 
    实例对象  vm   Vue.prototype   vm.__proto__ 
    实例属性  vm.$data  vm.$el  
    实例方法 / 数据    vm.$watch vm.$delete vm.$set
    实例方法 / 事件   vm.$emit     vm.$on    
    实例方法 / 生命周期   vm.$nextTick  vm.$mount()   vm.$forceUpdate (强制刷新页面)
    el  vue挂载元素  $mount("#app") 

    data 对象 
    响应式系统  (只要检测到数据更新,就一定会去修改视图 )    组件系统 
    1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中
    2. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值 (响应式)

    vm 实例化后赋值  没有意义  没有被响应式视图系统监听

    所有需要用到的数据都必须在data 里面初始化 否则没有响应式监听 
    借鉴 MVVM

    VM 实例对象  
    实例属性 
    vm.$el     
    vm.$data    
    实例方法  
    vm.$watch  监听数据改变
    vm.$set    修改对象和数据刷新视图
    vm.$delete  删除对象和数组 刷新视图 

    ref  用来记录真实DOM  this.$refs 
    a. ref 用于标签 表示这个真实DOM 对象
    b. ref 用于组件 表示这个组件对象 

    初始化操作  
    
    document.ready = function(){}     created 
    window.onLoad = function(){}      mounted

    $(function(){

    })

    实例生命周期钩子 
    每个 Vue 实例在被创建时都要经过一系列的过程
    (实例创建  实例载入  实例更新  实例销毁 )
    这些过程称为 实例生命周期   Vue 会在这个每个周期设置对应的函数去监听  这些函数就叫  生命周期钩子函数
    Vue 内置一些生命周期钩子函数(function )   给了开发者在不同阶段添加自己的代码的机会

    实例创建   beforeCreate   created   1       实例初始化创建 
    实例载入   beforeMount    mounted   1       初始化载入  请求ajax 
    实例更新   beforeUpdate   updated   n       实例 里面  data  数据改变 
    实例销毁   beforeDestroy  destroyed  1      实例被移除 

    activated   激活   keep-alive 
    deactivated 失活  
    errorCaptured  错误捕获 


    真实DOM  ref 
    Vue  创建实例之前 先解析HTML模板  先读取根元素 解析 所有的dom数据标签  然后以  树形结构 把dom数据存储在内存 (模板存储DOM)
    在内存中 描述 dom节点 的 数据信息  叫做 虚拟DOM 
    抽象定义 
    虚拟DOM  Virtual DOM   (性能优化)     

    优势  提升性能 提高加载速度 
    缺点  多了一次 虚拟DOM 初始化的计算 (尽量第一次不要加载过多的数据 )

    
    diff算法  
    数据更新 patch  diff算法  比较不同 

    如果每次data 改变 也就是数据更新  
    Vue (核心DIfferent 算法) 监测到数据改变  自动生成 新的虚拟DOM  


    会去和 旧的虚拟DOM 进行对比  得到变更的部分 patch 
    然后会把这 patch 放到一个队列  最终批量更新  渲染成真实DOM  


    性能优化
-->
</body>
</html>